<template>
  <div class="content" @click="setShowSetting" @dblclick="setShowSetting">
    <h1>{{ startDate.startTitle }}</h1>
    <h3 @click="goother">转到{{ startDate.isPetition ? '谢恩' : '求恩' }}九日敬礼</h3>
    <prayers /><setting :isShowOutlined="isShowSetting" />
  </div>
</template>

<script lang="ts">
  import { computed, defineComponent, ref, unref, watch } from 'vue';
  import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
  import { useGo } from '../hooks/usePages';
  import { useDefaultDate } from '../hooks/useStartDate';
  import { appStore } from '../store/modules/app';
  import { PompeiType } from '../types';
  import { getpompeiType } from '../utils/cache';
  import prayers from '/@/components/prayers';
  import setting from '/@/components/setting/index';
  export default defineComponent({
    name: 'vueName',
    components: { prayers, setting },
    setup() {
      const route = useRoute();
      const isShowSetting = ref(false);
      const { params } = route;
      const pompeiType = ref<PompeiType>(getpompeiType() as PompeiType);
      function setShowSetting() {
        if (isShowSetting.value) return;
        isShowSetting.value = true;
        setTimeout(() => {
          isShowSetting.value = false;
        }, 3000);
      }
      onBeforeRouteUpdate((to, from, next) => {
        pompeiType.value = to.params.pompeiType as PompeiType;

        next();
      });

      function goother(event: MouseEvent) {
        const go = useGo();
        const tiao = unref(startDate).isPetition ? 'grace' : 'petition';
        go(`/${tiao}`, false);
      }

      setShowSetting();
      const startDate = computed(() => {
        const startDate = useDefaultDate(unref(pompeiType));
        // appStore.commitStartDate(startDate);
        return startDate;
      });

      return {
        startDate,
        isShowSetting,
        setShowSetting,
        goother,
      };
    },
  });
</script>

<style lang="less">
  .content {
    font-size: 16px;
    padding: 10px;
    color: #6f6f6f;
    .red-border {
      padding: 10px;
      border: 5px solid #f9cec8;
      margin: 10px 0;
    }
    .yellow-border {
      padding: 15px;
      border: 1px dotted #ecc469;
      border-radius: 10px;
    }
    .red-background {
      padding: 15px;
      background-color: #ffebeb;
    }
    .text-center {
      text-align: center;
    }
    .text-md {
      font-size: 20px;
    }
    .text-lg {
      font-size: 24px;
    }
    .text-sm {
      font-size: 16px;
      margin-bottom: 8px;
    }
    .text-red {
      color: #d32935;
    }
    .mt {
      margin-top: 10px;
    }
    .mt-md {
      margin-top: 20px;
    }
    .mb {
      margin-bottom: 10px;
    }
    .mb-md {
      margin-bottom: 20px;
    }
    .icon {
      margin-left: 5px;
      position: relative;
      &:after {
        display: inline-block;
        content: '';
        margin-top: -12px;
        background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'><path d='M274.911712 257.383784a110.702703 110.702703 0 1 1 215.962522 34.336288c1.845045-0.129153 3.69009-0.202955 5.442883-0.202955a73.174486 73.174486 0 0 1 31.10746 6.882018A147.603604 147.603604 0 1 0 274.911712 355.005117z' /><path d='M769.900396 423.843748a73.801802 73.801802 0 0 0-93.230126-9.225225A73.801802 73.801802 0 0 0 570.118919 375.18991c-1.402234 0.83027-2.804468 1.697441-4.151351 2.601513a73.801802 73.801802 0 0 0-102.566054-41.624216c-1.291532 1.273081-2.619964 2.509261-3.966847 3.69009v-82.473513a73.801802 73.801802 0 0 0-73.30364-73.801802c-40.886198-0.258306-74.318414 34.244036-74.318414 75.111784v306.683387l-53.303352-53.303351a73.801802 73.801802 0 0 0-104.374198 104.374198L311.812613 774.107099l63.967711 63.377297A172.511712 172.511712 0 0 0 497.202739 887.466667h156.552072A137.769514 137.769514 0 0 0 791.524324 749.697153V476.021622a73.580396 73.580396 0 0 0-21.623928-52.177874zM754.623423 736.781838A113.783928 113.783928 0 0 1 640.839495 850.565766H505.726847a152.216216 152.216216 0 0 1-105.167568-42.19618L348.713514 758.830126l-36.900901-36.900901L180.224 590.414414A36.900901 36.900901 0 1 1 232.475676 538.162739l79.336937 79.336937 36.900901 36.900901V258.306306c0-20.295495 16.070342-37.602018 36.421189-37.860324a36.900901 36.900901 0 0 1 37.380612 36.900901v104.392649h0.092253c0 1.180829-0.092252 2.361658-0.092253 3.560936v169.744145h36.900901V402.21982a36.900901 36.900901 0 0 1 24.539099-34.779099A36.900901 36.900901 0 0 1 533.218018 402.21982v169.744144h36.900901v-131.88382c0-20.295495 16.070342-37.602018 36.421189-37.860324A36.900901 36.900901 0 0 1 643.920721 439.120721v169.744144h36.900901v-131.88382c0-20.295495 16.070342-37.602018 36.421189-37.860324A36.900901 36.900901 0 0 1 754.623423 476.021622z' /></svg>");
        background-repeat: no-repeat;
        background-size: 24px 24px;
        height: 24px;
        width: 24px;
        position: absolute;
        top: 50%;
        left: 0;
      }
    }
  }
</style>
